<template>
  <el-tabs type="border-card">

    <div class="box">
      <div class="top">
        
        <el-select v-model="province" placeholder="选择省" @change="handleProvinceChange">
          <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="city" placeholder="选择市" @change="handleCityChange">
          <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="area" placeholder="选择区">
          <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
  
      </div>
      <div class="bottom">


      </div>
    </div>


  </el-tabs>
</template>
<script  setup>
import { ref, reactive, onMounted, computed } from "vue";
const currentStatus1 = ref("");
const value = ref("");
const province = ref("");
const city = ref("");
const area = ref("");
const textarea1 = ref("");
const centerDialogVisible = ref(false);
const provinces = [
  { value: "p1", label: "河南" },
  { value: "p2", label: "北京" },
  // 其他省份数据
];
const cities = ref([]);
const areas = ref([]);
const handleProvinceChange = () => {
  // 根据选中的省份获取对应的城市数据，这里假设是根据省份设置的静态数据
  if (province.value === "p1") {
    cities.value = [
      { value: "c11", label: "郑州" },
      { value: "c12", label: "濮阳" },
    ];
    console.log(cities.value);
  } else if (province.value === "p2") {
    cities.value = [
      { value: "c21", label: "海淀" },
      { value: "c22", label: "顺义" },
      // 其他城市数据
    ];
    console.log(cities.value);
  }
  city.value = ""; // 重置选择的城市
  area.value = ""; // 重置选择的区域
};
const handleCityChange = () => {
  // 根据选中的城市获取对应的区域数据，这里同样假设是根据城市设置的静态数据
  if (city.value === "c11") {
    areas.value = [
      { value: "a111", label: "郑州市" },
      { value: "a112", label: "濮阳市" },
      // 其他区域数据
    ];
  } else if (city.value === "c12") {
    areas.value = [
      { value: "a121", label: "上地市" },
      { value: "a122", label: "顺义市" },
      // 其他区域数据
    ];
  }
  area.value = ""; // 重置选择的区域
};

const options = [
  {
    value: "Option2",
    label: "二手房出售",
  },
  {
    value: "Option3",
    label: "有房出租",
  },
  {
    value: "Option4",
    label: "我想找个房",
  },
  {
    value: "Option5",
    label: "我想租个房",
  },
  {
    value: "Option6",
    label: "帮我找房",
  },
];
</script>
<style scoped lang="scss">
.btn {
  width: 100px;
  height: 2rem;
  background: #169bd5;
  border: 0px;
  color: #fff;
}

.box {
  width: 100%;
  height: 100%;
}

.top {
  width: 100%;
  height: 3rem;
}
.bottom {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .btntop {
    width: 100%;
    height: 2rem;
  }
  .btncenter {
    width: 100%;
    flex: 1;
  }
  button {
    width: 100px;
    height: 2rem;
  }
}

.active {
  background: #ccc;
  border: 0px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>

